<template>
    <div class="album-carousel">
        <button class="carousel-btn prev-btn" @click="prevAlbum">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        <div class="album-container">
            <AlbumCard 
                v-for="(album, index) in visibleAlbums" 
                :key="`album-${album.displayIndex}`" 
                :class="getAlbumClass(album.displayIndex)"
                :coverUrl="album.coverUrl" 
                :albumName="album.albumName"
                @click="handleAlbumClick(album.displayIndex)"
            ></AlbumCard>
        </div>
        <button class="carousel-btn next-btn" @click="nextAlbum">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import AlbumCard from './AlbumCard.vue';

const albums = [
    { coverUrl: 'https://picsum.photos/700/350?random=1', albumName: '专辑1' },
    { coverUrl: 'https://picsum.photos/700/350?random=2', albumName: '专辑2' },
    { coverUrl: 'https://picsum.photos/700/350?random=3', albumName: '第三个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=4', albumName: '第四个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=5', albumName: '第五个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=6', albumName: '第六个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=7', albumName: '第七个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=8', albumName: '第八个专辑' },
    { coverUrl: 'https://picsum.photos/700/350?random=9', albumName: '第九个专辑' },
];

const currentIndex = ref(0);
const autoSlideInterval = ref(null);
const isAutoSliding = ref(true);

const startAutoSlide = () => {
    autoSlideInterval.value = setInterval(() => {
        if (isAutoSliding.value) nextAlbum();
    }, 5000);
};

const stopAutoSlide = () => {
    if (autoSlideInterval.value) {
        clearInterval(autoSlideInterval.value);
        autoSlideInterval.value = null;
    }
};

onMounted(() => {
    startAutoSlide();
});

onUnmounted(() => {
    stopAutoSlide();
});

const visibleAlbums = computed(() => {
    const result = [];
    for (let i = 0; i < 3; i++) {
        const index = (currentIndex.value + i) % albums.length;
        result.push({
            ...albums[index],
            displayIndex: i
        });
    }
    return result;
});

const nextAlbum = () => {
    isAutoSliding.value = false;
    currentIndex.value = (currentIndex.value + 1) % albums.length;
    setTimeout(() => {
        isAutoSliding.value = true;
    }, 5000);
};

const prevAlbum = () => {
    isAutoSliding.value = false;
    currentIndex.value = (currentIndex.value - 1 + albums.length) % albums.length;
    setTimeout(() => {
        isAutoSliding.value = true;
    }, 5000);
};

const handleAlbumClick = (displayIndex) => {
    isAutoSliding.value = false;
    if (displayIndex === 0) prevAlbum();
    if (displayIndex === 2) nextAlbum();
    setTimeout(() => {
        isAutoSliding.value = true;
    }, 5000);
};

const getAlbumClass = (displayIndex) => {
    if (displayIndex === 1) return 'album-center';
    if (displayIndex === 0) return 'album-left';
    if (displayIndex === 2) return 'album-right';
    return '';
};
</script>

<style scoped>
.album-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-top: 50px;
    position: relative;
    min-width: 1200px;
    min-height: 200px;
    background-color: #1E1E1E;
    border-radius: 8px;
}

.album-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    position: relative;
    height: 250px;
}

/* 左侧专辑样式 */
.album-left {
    position: absolute;
    left: -140px;
    z-index: 1;
    transform: scale(0.8);
    opacity: 0.7;
}

/* 中间专辑样式 */
.album-center {
    position: relative;
    z-index: 3;
    transform: scale(1);
}

/* 右侧专辑样式 */
.album-right {
    position: absolute;
    right: -140px;
    z-index: 1;
    transform: scale(0.8);
    opacity: 0.7;
}

.carousel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease;
}

.album-carousel:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

.album-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    position: relative;
}

.album-card {
    background-color: #e6f7ff;
    margin: 0 10px;
}
</style>